<template>
    <div class="infinite-loading" ref="container">
        <div class="loading" v-if="props.loading">
            <span class="img"></span>
            <span class="text">正在加载...</span>
        </div>
        <div class="none" v-if="props.finished">
            <span class="img"></span>
            <span class="text">亲，没有更多了</span>
        </div>
    </div>
</template>
<script>
export default {
    name: 'InfiniteLoading'
}
</script>
<script setup>
import { useIntersectionObserver } from '@vueuse/core';
import { ref } from 'vue';
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    finished: {
        type: Boolean,
        default: false
    },
})

const emit = defineEmits()
const container = ref(null)
useIntersectionObserver(container, ([{isIntersecting}], dom) => {
    if(isIntersecting){
        if(props.loading === false && props.finished === false){
            emit('infinite')
        }
    }
},{
    threshold: 0
})
</script>
<style scoped lang='scss'>
.infinite-loading {
    .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;

        .img {
            width: 50px;
            height: 50px;
            background: url(../../assets/images/load.gif) no-repeat center / contain;
        }

        .text {
            color: #999;
            font-size: 16px;
        }
    }

    .none {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;

        .img {
            width: 200px;
            height: 134px;
            background: url(../../assets/images/none.png) no-repeat center / contain;
        }

        .text {
            color: #999;
            font-size: 16px;
        }
    }
}
</style>
    